<script setup>
import "echarts-wordcloud";
import { ref } from "vue";
//13个颜色
const colorAll = ref([
  "#36724C",
  "#96a48d",
  "#3EA892",
  "#c79780",
  "#813c3f",
  "#4d7b9f",
  "#3f503b",
  "#DDB580",
  "#C26051",
  "#96CB9C",
  "#52CAC4",
  "#617750",
  "#225165",
]);
const option = ref({
  //鼠标悬浮显示的内容
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,0.7)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
    formatter: function (params) {
      return `行业: ${params.name}<br/>权重: ${params.value}`;
    },
  },

  series: [
    {
      type: "wordCloud",
      /**
       * 绘制词云的形状, 值为回调函数 或 关键字, 默认 circle
       *  关键字:
       *
       * circle（圆形）  词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
       * cardioid（苹果形或心形曲线）
       * diamond（菱形 正方形）
       * triangle-forward（三角形-向前）
       * triangle（三角形-直立）
       * pentagon（五边形）
       * star（星形）
       */
      // shape: "circle",
      // 保持 maskImage 的纵横比或形状的纵横比为 1：1
      keepAspect: false,
      /**
       * 词云轮廓图，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串, 不包含白色区域; 可选选项
       * shape选项将随着云的形状增长而继续应用
       * 有形状限制的时候，最好用背景图来实现，而且这个背景图一定要放base64的，不然词云画不出来
       */

      // 词云整个图表放置的位置 和 尺寸大小
      left: "center",
      top: "center",
      width: "100%",
      height: "100%",
      right: null,
      bottom: null,
      // 词云文本大小范围,  默认为最小12像素，最大60像素
      //   sizeRange: [10, 50],
      // 词云文字旋转范围和步长。 文本将通过旋转在[-90，90]范围内随机旋转步骤45
      // 如果都设置为 0 , 则是水平显示
      //   rotationRange: [0, 0],
      //   rotationStep: 45,
      /**
       * 词间距, 距离越大，单词之间的间距越大, 单位像素
       * 这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
       */
      //   gridSize: 8,
      // 设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
      //   drawOutOfBound: false,
      /**
       * 布局的时候是否有动画
       * 注意：禁用时，当单词较多时，将导致UI阻塞。
       */
      layoutAnimation: true,
      // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
      textStyle: {
        fontFamily: "sans-serif",
        fontWeight: "bold",
        color: function () {
          return colorAll.value[Math.floor(Math.random() * 13)];
        },
        // 颜色可以用一个函数来返回字符串
        // color: function () {
        //   // 随机颜色
        //   return (
        //     "rgb(" +
        //     [
        //       Math.round(Math.random() * 160),
        //       Math.round(Math.random() * 160),
        //       Math.round(Math.random() * 160),
        //     ].join(",") +
        //     ")"
        //   );
        // },
      },
      // 鼠标hover的特效样式
      emphasis: {
        focus: "self",
        textStyle: {
          textShadowBlur: 10,
          textShadowColor: "#999",
        },
      },

      /**
 * 词云数据，必须是一个数组，每个数组项必须有name和value属性
 * 设置单个文本的样式：  textStyle 
 * 
 * 例：{
                name: '',
                value: 40,
                textStyle: {
                }
            },
 */
      data: [
        { name: "九章算术", value: 1000 },
        { name: "本草纲目", value: 850 },
        { name: "天工开物", value: 800 },
        { name: "齐民要术", value: 600 },
        { name: "水经注", value: 900 },
        { name: "梦溪笔谈", value: 600 },
        { name: "授时历", value: 800 },
        { name: "周髀算经", value: 400 },
        { name: "张衡", value: 850 },
        { name: "祖冲之", value: 200 },
        { name: "四大发明", value: 8000 },
        { name: "营造法式", value: 1500 },
        { name: "李时珍", value: 1500 },
        { name: "伤寒杂病论", value: 800 },
        { name: "徐霞客游记", value: 200 },
        { name: "沈括", value: 100 },
        { name: "农政全书", value: 250 },
        { name: "郭守敬", value: 1200 },
        { name: "算学启蒙", value: 300 },
        { name: "考工记", value: 900 },
        { name: "火药", value: 700 },
        { name: "指南针", value: 550 },
        { name: "造纸术", value: 750 },
        { name: "活字印刷术", value: 1100 },
        { name: "数书九章", value: 300 },
        { name: "海岛算经", value: 950 },
        { name: "甘石星经", value: 1200 },
        { name: "浑天仪", value: 1300 },
        { name: "地动仪", value: 600 },
        { name: "洗冤集录", value: 850 },
        { name: "四元玉鉴", value: 500 },
        { name: "孙子算经", value: 300 },
        { name: "神农本草经", value: 150 },
        { name: "千金方", value: 1100 },
        { name: "宋应星", value: 350 },
        { name: "贾思勰", value: 250 },
        { name: "徐光启", value: 900 },
        { name: "郦道元", value: 400 },
        { name: "针灸", value: 700 },
        { name: "水利工程", value: 800 },
        { name: "送子天王图", value: 800 },
        { name: "虢国夫人游春图", value: 750 },
        { name: "簪花仕女图", value: 700 },
        { name: "写生珍禽图", value: 650 },
        { name: "九成宫醴泉铭", value: 700 },
        { name: "颜勤礼碑", value: 700 },
        { name: "玄秘塔碑", value: 650 },
        { name: "蜀素帖", value: 800 },
        { name: "定窑白瓷", value: 600 },
        { name: "磁州窑瓷器", value: 600 },
        { name: "吉州窑瓷器", value: 550 },
        { name: "耀州窑瓷器", value: 550 },
        { name: "麦积山石窟", value: 800 },
        { name: "大足石刻", value: 800 },
        { name: "晋祠侍女像", value: 700 },
        { name: "陶俑", value: 650 },
        { name: "苏州园林", value: 900 },
        { name: "岳阳楼", value: 750 },
        { name: "滕王阁", value: 750 },
        { name: "赵州桥", value: 850 },
        { name: "埙", value: 500 },
        { name: "篪", value: 450 },
        { name: "秦王破阵乐", value: 700 },
        { name: "胡旋舞", value: 650 },
        { name: "秦腔", value: 700 },
        { name: "越剧", value: 700 },
        { name: "黄梅戏", value: 650 },
        { name: "评剧", value: 650 },
        { name: "剪纸", value: 550 },
        { name: "皮影", value: 550 },
        { name: "竹雕", value: 500 },
        { name: "漆器", value: 500 },
        { name: "灯彩", value: 450 },
        { name: "风筝", value: 450 },
        { name: "鼻烟壶", value: 400 },
        { name: "折扇", value: 400 },
        { name: "洛神赋图", value: 850 },
        { name: "步辇图", value: 800 },
        { name: "鹊华秋色图", value: 750 },
      ],
    },
  ],
});
</script>

<template>
  <!-- 词云 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
  // padding: 20px;
}
</style>
